import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import Checkbox from '../../ch/components/Checkbox.vue'

<Meta
  title="Components/Form/Input Checkbox"
  component={Checkbox}
  argTypes={{
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Checkbox },
  template: `
  <div>
    <Checkbox
      :variant="variant"
      :size="size"
      :label="label"
      :id="id"
      :name="name"
      :value="value"
      :message="message"
      :messageType="messageType"
      :required="required"
    />
    </div>
  `,
})

# Input Checkbox

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      variant: 'outline',
      size: 'base',
      label: 'Label',
      name: 'checkbox-name',
      id: 'checkbox-id',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Checkbox negative type

- `input--negative` for standard checkboxes on dark background

<Canvas style={{ backgroundColor: '#2f4356' }}>
  <input type="checkbox" class="input--negative input--base" />
</Canvas>

## Input disabled state

- `input--disabled` or `disabled state on the input` to add the disabled style

<Canvas>
  <input type="checkbox" class="input--outline input--base" disabled />
  <input type="checkbox" class="input--outline input--base" disabled checked />
  <input type="checkbox" class="input--negative input--base" disabled />
  <input type="checkbox" class="input--negative input--base" disabled checked />
</Canvas>

## Sizes

For size variations, the following css classes are built:

- `input--sm` for small inputs
- `input--base` for standard size
- `input--lg` for large inputs

<Canvas>
  <input type="checkbox" class="input--outline input--sm" value="input--sm" />
  <input
    type="checkbox"
    class="input--outline input--base"
    value="input--base"
  />
  <input type="checkbox" class="input--outline input--lg" value="input--lg" />
</Canvas>

## Required checkbox

If the field is mandatory:

- a `required` attribute is added to the input element
- an asterisk is displayed right after the label. This can be done by adding a `text--asterisk` class on the label element.
- the word “required“ is added to the legend for screen readers. This can be done by wrapping the word into a `.sr-only` element.

<Canvas>
  <div class="form__group__checkbox">
    <input
      type="checkbox"
      id="checkbox-id1"
      name="checkbox-name"
      required="required"
      class="input input--outline input--base"
      value=""
    />
    <label for="checkbox-id1" class="text--base text--asterisk">
      Label <span class="sr-only">required</span>
    </label>
  </div>
</Canvas>

## Messages

If the field has error, an `input--error` class is added to the input element. Additionally
a `badge badge--sm badge--error` element wraps the error message, right after the input element:

<Canvas>
  <div class="form__group__checkbox">
    <input
      type="checkbox"
      id="checkbox-id2"
      name="checkbox-name"
      required="required"
      class="input input--outline input--base input--error"
      value=""
    />
    <label for="checkbox-id2" class="text--base text--asterisk">
      Label <span class="sr-only">required</span>
    </label>
    <div class="badge badge--sm badge--error">Error message</div>
  </div>
</Canvas>

## Multiple Checkboxes

It's recommanded to wrap related checkboxes in a `fieldset` element, with a `legend` element as a title.
Check the [Fieldset documentation](/docs/components-form-fieldset--example-radio) for more information.
